<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            content: "";
            width: 104%;
            height: 102%;
            border-radius: 8px;
            background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
            position: absolute;
            z-index: -1;
            top: -1%;
            left: -2%;
            animation: spin 2.5s linear infinite;



            border-radius: 10px;
        }

        button {
            border-color: gray;
            height: 39px;
            width: 200px;
            color: skyblue;
            border-radius: 16px;
            background-color: gray;
            font-family: "楷体", "楷体_GB2312";
            font-size: 18px;
        }

        .c-gray {
            color: #ccc;
        }

        .c-green {
            color: green;
        }

        .c-red {
            color: red;
        }

        a {
            text-decoration: none;
            color: skyblue;
        }

        .xz {
            height: 60px;
            background-color: #767676;
        }

        .xq {
            line-height: 60px;
            font-size: 22px;
            font-family: "楷体", "楷体_GB2312";
            color: skyblue;
        }

        tr {
            text-align: center;
        }

        li {
            list-style-type: none;
        }

        .box2 {
            width: 200px;
            height: 888px;
            background-color: #767676;
            padding-top: 66px;
        }

        table {
            margin-left: 250px;
        }
    </style>
</head>

<body>
    <div class="xz">
        <a href="" class="xq" style="width: 156px;">明德软件阅读刊</a>
        <div class="box2">
            <ul style="margin-left: -40px; line-height: 114px;">
                <li><button id="addBtn">添加文章</button></li>
                <li><button id="recyclelistBtn">回收站列表</button></li>
                <li><button id="addImgBtn">单文件上传</button></li>
                <!-- <button id="logoutBtn">退出</button> -->
                <!-- <a href="/recyclelist">回收站列表</a>
            <a href="/addImg">单文件上传</a> -->
                <li><button class="quit"><a href='/logout' onclick="return confirm('确定离开吗 确定嘛')">退出登录</a></button></li>
            </ul>
        </div>
    </div>
    <h1 style="text-align: center;color: gray;">文章列表</h1>
    <h2 style="text-align: center;color: gray;">帐号:{{userInfo.username}} Last_time:{{userInfo.last_login_date | dealDate
        'YYYY-MM-DD '}}</h2>

    <div class="box">
        <table align="center" width="1050px" border="1px" rules="all">
            <tr class="tr">
                <td>序号</td>
                <td>作者</td>
                <td>标题</td>
                <td>内容</td>
                <td>分类</td>
                <td>图片</td>
                <td>链接</td>
                <td>状态</td>
                <td>添加时间</td>
                <td>操作</td>
            </tr>
            {{each articles item index}}
            <tr>
                <td>{{index + 1}}</td>
                <td>{{item.author}}</td>
                <td>{{item.article}}</td>
                <td>{{item.content}}</td>
                <td>{{item.cate_name}}</td>
                <td><img src="/{{item.img}}" alt="" width="100px"></td>
                <td><a href="#">查看详情</a></td>
                <!-- <td>{{item.content}}</td> -->

                <!-- <td>{{item.author}}</td> -->

                <td>
                    <!-- {{if item.Audit_status  == 0}}
                <span class="c-gray">待审核</span>
                {{else if item.Audit_status == 1}}
                <span class="c-green">审核通过</span>
                {{else}}
                    <span class="c-red">审核失败</span>
                {{/if}} -->
                    {{@ item.Audit_status_text}}
                </td>
                <td>{{item.addtime | dateFormat 'YYYY-MM-DD'}}</td>
                <td>
                    <a href="/edit?id={{item.id}}">编辑</a>
                    <a href="javascript:;" onclick="confirmDelete('{{item.id}}');">永久删除</a>
                    <a href="recycle?id={{item.id}}" onclick="confirmDelete('{{item.id}}');">Ajax删除</a>
                    <a href="/recycle?id={{item.id}}">加入回收站</a>
                </td>
            </tr>
            {{/each}}
        </table>
    </div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script>

    document.getElementById('addBtn').onclick = function () {
        location.href = '/add'
    }
    document.getElementById('recyclelistBtn').onclick = function () {
        location.href = '/recyclelist'
    }
    document.getElementById('addImgBtn').onclick = function () {
        location.href = '/addImg'
    }

    function confirmDelete(id) {
        let result = layer.confirm('确认删除吗?确定吗?永久删除数据不可还原', {
            btn: ['是的', '取消'],
            shadeClose: true,
            shade: [0.3, '#000']

        }, () => {
            location.href = "/delete?id=" + id
        }, () => {
            layer.msg('已取消')
        });
    }
</script>

</html>